<div>
    <script>
    $(document).ready(function(){
        $("#btn_accept").click(function(){
            $('#btn_accept').attr('disabled',true);
	    
	    //validar comodines
	    if(valida_willcard() == true)
		select_all();
		else
		return;
        });
    });
    
    function valida_willcard()
    {
	if($('#wildcard_1').val() == $('#wildcard_2').val())
	{
	    $('#error_willcard').show();
	    $('#btn_accept').removeAttr('disabled');
	    return false;
	}
	else
	{
	    $('#error_willcard').hide();
	    return true;
	}
    }

    function select_all()
    {
        var sites=[];
        var names=[];
	var willcard=[];
        var  is_checked=0;
        $('#games :checked').each(function() {
                         sites.push($(this).val());
                         names.push($(this).attr('name'));
                         is_checked ++;
                 });
        
	willcard.push($('#wildcard_1').val());
	willcard.push($('#wildcard_1_res').val());
	willcard.push($('#wildcard_2').val());
	willcard.push($('#wildcard_2_res').val());
            
        var data_ajax={
                        type: 'POST',
                        url: "<?php echo base_url(); ?>index.php/user/register_game",
                        data: { xsites: sites, xnames: names, xwillcard: willcard},
                        success: function( data ) {
                                                    if(data != 0)
                                                    {	
                                                       Message_operation("content","succesfull");
                                                    }
                                                    else
                                                    {
                                                       Message_operation("content","error");
                                                    }
                                                  },
                        error: function(){log("Error");},
                        dataType: 'json'
                        };
			$.ajax(data_ajax);
    }
    
    function log(str_log)
    {
        try {
                console.log(str_log + "\n");
        } catch(e) {

        }
    }
    
    function Message_operation(idDiv, type)
    {
        var div = '#'+idDiv;
        
        if(type == "error")
        {
           $(div).empty();
           $(div).addClass('alert alert-error');
           $(div).text("Ocurrio un error, intente nuevamente la operación.");  
        }
        else
        {
           $(div).empty();
           $(div).addClass('alert alert-success');
           $(div).text("Operación registrada correctamente.");
        }
    }
    
    function Estadisticas(name)
    {
	$('#title_date').html(name);
	$('#waiting').fadeIn('slow');
	
	var data_ajax={
                        type: 'POST',
                        url: "<?php echo base_url(); ?>index.php/user/graphics",
                        data: { team: name, est: 'L'},
                        success: function( data ) {
                                                    if(data != 0 && data != -1)
                                                    {
							var partidos 	= 0;
							var ganados 	= 0;
							var perdidos 	= 0;
							var empatados 	= 0;
							
							$.each(data, function(k,v)
                                                                {
								    switch(k)
								    {
									case "partidos":
									    $('#cantPartidos').html("Partidos Jugados " + v);
									    partidos = v;
									    break;
									
									case "ganados":
									    $('#ganados').text(v);
									    ganados = v;
									    break;
									
									case "empatados":
									    $('#empatados').text(v);
									    empatados = v;
									    break;
									
									case "perdidos":
									    $('#perdidos').text(v);
									    perdidos = v;
									    break;
									
									case "ganadosLoc":
									    $('#ganadosLoc').text(v);
									    break;
									
									case "empatadosLoc":
									    $('#empatadosLoc').text(v);
									    break;
									
									case "perdidosLoc":
									    $('#perdidosLoc').text(v);
									    break;
									
									case "ganadosVis":
									    $('#ganadosVis').text(v);
									    break;
									
									case "empatadosVis":
									    $('#empatadosVis').text(v);
									    break;
									
									case "perdidosVis":
									    $('#perdidosVis').text(v);
									    break;
									
								    }
								    
								});
						       
						       //Calcular barra
						       //Ganados
						       if( ganados > 0 )
						       {
							    var p = (ganados * 100 ) / partidos;
							    $('#barG').css('width', p +'%');
						       }
						       else
						       {
							    $('#barG').css('width', '0%');
						       }
						       
						       if( empatados > 0)
						       {
							    var p = (empatados * 100 ) / partidos;
							    $('#barE').css('width', p +'%');
						       }
						       else
						       {
							    $('#barE').css('width', '0%');
						       }
						       
						       if( perdidos > 0)
						       {
							    var p = (perdidos * 100 ) / partidos;
							    $('#barP').css('width', p +'%');
						       }
						       else
						       {
							    $('#barP').css('width', '0%');
						       }
						       //-----------------------------------------
						    }
                                                    else
                                                    {
                                                       //alert("Error");
						       log("Error");
                                                    }
                                                  },
                        error: function(){log("Error");},
                        dataType: 'json'
                        };
			$.ajax(data_ajax);
	
	
	$('#modal_estadisticas').modal('show');
	$('#waiting').fadeOut('slow');
    }
    
    </script>
<div class="row">
    <div class="span6 offset3">
    
    <?php
    if($enabled == true)
    {
        //no se puede jugar
        $date = explode('-',$date);
        echo '
            <div class="alert alert-error">
                No tenes tiempo de jugar o modificar tu jugada, el plazo fue hasta el día '.$date[2].'-'.$date[1].'-'.$date[0].' a las  18:00 horas, espera a la próxima fecha. 
            </div>
            ';
    }
    else
    {
        //si se puede jugar
        $date = explode('-',$date);
        echo '
            <div class="alert alert-info">
                Podes jugar o modificar tu jugada hasta el día '.$date[2].'-'.$date[1].'-'.$date[0].' a las 18:00 horas. 
            </div>
            ';
    }
    ?>
    
    <div class="alert alert-error" style="display: none" id="error_willcard">
        <strong>Error!! </strong>
        Los comodines no pueden ser usados para el mismo partido. 
    </div>
    
    <table id="games" class="table table-striped table-bordered table-condensed">
        <tr>
	    <th></th>
            <th colspan="3" style="text-align: center">Local</th>
            <th style="text-align: center">Empate</th>
            <th colspan="3" style="text-align: center">Visitante</th>
        </tr>
    <?php
    if($this->session->userdata('logged_in'))
    {
	$partido = 0;
	$comodinFecha1 = -1;
	$comodinFecha1Resultado = -1;
	$comodinFecha2 = -1;
	$comodinFecha2Resultado = -1;
	
        foreach($data as $value)
        {
	    $partido++;
	    if($value['willcard'] != null)
	    {
		if($comodinFecha1 == -1)
		{
		    $comodinFecha1 = $value['idGame'];
		    $comodinFecha1Resultado = $value['willcard'];
		}
		else
		{
		    $comodinFecha2 = $value['idGame'];
		    $comodinFecha2Resultado = $value['willcard'];
		}
	    }
	    
            echo '<tr>';
            switch($value['result'])
            {
                //Empate
                case 0:
		    echo '<td style="text-align: center; padding-top: 10px;"><strong>'.$partido.'</strong></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 1, FALSE).'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['localImage'].'" width="25" height="25"></td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')">'.$value['localName'].'</td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 0, TRUE).'</td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')">'.$value['visitName'].'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['visitImage'].'" width="25" height="25"></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 2, FALSE).'</td>';
                    break;
                //Local
                case 1:
		    echo '<td style="text-align: center; padding-top: 10px;"><strong>'.$partido.'</strong></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 1, TRUE).'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['localImage'].'" width="25" height="25"></td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')">'.$value['localName'].'</td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 0, FALSE).'</td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')">'.$value['visitName'].'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['visitImage'].'" width="25" height="25"></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 2, FALSE).'</td>';
                    break;
                //Visitante
                case 2:
		    echo '<td style="text-align: center; padding-top: 10px;"><strong>'.$partido.'</strong></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 1, FALSE).'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['localImage'].'" width="25" height="25"></td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')">'.$value['localName'].'</td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 0, FALSE).'</td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')">'.$value['visitName'].'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['visitImage'].'" width="25" height="25"></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 2, TRUE).'</td>';
                    break;
                //Default -> Empate
                default:
		    echo '<td style="text-align: center; padding-top: 10px;"><strong>'.$partido.'</strong></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 1, FALSE).'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['localImage'].'" width="25" height="25"></td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['localName'].'\')">'.$value['localName'].'</td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 0, TRUE).'</td>';
                    echo '<td style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')">'.$value['visitName'].'</td>';
                    echo '<td width="25" style="cursor: pointer;" onclick="Estadisticas(\''.$value['visitName'].'\')"><img src="'.base_url().'assets/img/escudos/'.$value['visitImage'].'" width="25" height="25"></td>';
                    echo '<td style="text-align: center">'.form_radio($value['idGame'], 2, FALSE).'</td>';
                    break;
            }
            echo '</tr>';
        }
    }
    ?>
    </table>
    
    <!-- Comodines -->
    <table class="table table-striped table-bordered table-condensed">
	<thead>
	    <tr>
		<th style="text-align: center;" colspan="2">Comodín 1</th>
		<th style="text-align: center;" colspan="2">Comodín 2</th>
	    </tr>
	</thead>
	<tbody>
	    <tr>
		<td style="text-align: center;">Partido</td>
		<td style="text-align: center;">Resultado</td>
		<td style="text-align: center;">Partido</td>
		<td style="text-align: center;">Resultado</td>
	    </tr>
	    <tr>
		<td style="text-align: center;">
		    <select id="wildcard_1" class="input-mini">
			<?php
			    $partido = 0;
			    foreach($data as $value)
			    {
				$partido++;
				if($value['idGame'] == $comodinFecha1)
				    {
					echo '<option value="'.$value['idGame'].'" selected>'.$partido.'</option>';
				    }
				    else
				    {
					echo '<option value="'.$value['idGame'].'">'.$partido.'</option>';
				    }
			    }
			?>
		    </select>
		</td>
		<td style="text-align: center;">
		    <select id="wildcard_1_res" class="input-small">
			<option value="1" <?php echo ($comodinFecha1Resultado == 1 ? "selected": "" );?> >Local</option>
			<option value="0" <?php echo ($comodinFecha1Resultado == 0 ? "selected": "" );?> >Empate</option>
			<option value="2" <?php echo ($comodinFecha1Resultado == 2 ? "selected": "" );?> >Visita</option>
		    </select>
		</td>
		<td style="text-align: center;">
		    <select id="wildcard_2" class="input-mini">
			<?php
			    $partido = 0;
			    foreach($data as $value)
			    {
				$partido++;
				if($value['idGame'] == $comodinFecha2)
				    {
					echo '<option value="'.$value['idGame'].'" selected>'.$partido.'</option>';
				    }
				    else
				    {
					echo '<option value="'.$value['idGame'].'">'.$partido.'</option>';
				    }
			    }
			?>
		    </select>
		</td>
		<td style="text-align: center;">
		    <select id="wildcard_2_res" class="input-small">
			<option value="1" <?php echo ($comodinFecha2Resultado == 1 ? "selected": "" );?> >Local</option>
			<option value="0" <?php echo ($comodinFecha2Resultado == 0 ? "selected": "" );?> >Empate</option>
			<option value="2" <?php echo ($comodinFecha2Resultado == 2 ? "selected": "" );?> >Visita</option>
		    </select>
		</td>
	    </tr>
	</tbody>
	
    </table>
    <br>
    <?php
    echo anchor('/login/main','Cancelar','class="btn btn-danger"').'&nbsp&nbsp';
    if($enabled == true)
        {
        //echo '<a id="" class="btn btn-success" disabled="false">Aceptar</a>';      
        }
        else
        {
            echo '<a id="btn_accept" class="btn btn-success">Aceptar</a>';
        }
    ?>
    </div>
</div>
</div>

<div class="modal hide fade" id="modal_estadisticas">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="title_date"></h3>
    </div>
    <div class="modal-body">
	<br>
        <table id="table_results" style="height: 300px; width: 100%">
	    <thead>
		<tr>
		    <td rowspan="2" style="alignment-adjust: central; text-align: center; width: 50%">
			<div id="mainGraphics" style="text-align: left; font-size: 11px;">
			    <!-- Cantidad de partidos -->
			    <div class="alert alert-info" style="text-align: center">
				<strong id="cantPartidos"></strong>
			    </div>
			    <!-- Ganados -->
			    Partidos ganados <span class="badge badge-success" id="ganados">x</span>
			    <div class="progress progress-success" style="height: auto;">
				<div class="bar" style="width: 0%; height: 45px;" id="barG"></div>
			    </div>
			    
			    <!-- Empatados -->
			    Partidos empatados <span class="badge badge-info" id="empatados">x</span>
			    <div class="progress progress-info" style="height: auto;">
				<div class="bar" style="width: 0%; height: 45px;" id="barE"></div>
			    </div>
			    
			    <!-- Perdidos -->
			    Partidos perdidos <span class="badge badge-important" id="perdidos">x</span>
			    <div class="progress progress-danger" style="height: auto;">
				<div class="bar" style="width: 0%; height: 45px;" id="barP"></div>
			    </div>
			    
			</div>
		    </td>
		    <td style="height: 150px; alignment-adjust: central; text-align: right;">
			<div id="localGraphics" style="font-size: 11px;">
			    <span class="label">Local</span><br><br>
				Ganados <span class="badge badge-success" id="ganadosLoc">2</span><br><br>
				Empatados <span class="badge badge-info" id="empatadosLoc">2</span><br><br>
				Perdidos <span class="badge badge-important" id="perdidosLoc">2</span>
			</div>
		    </td>
		</tr>
		<tr>
		    <td style="height: 150px; alignment-adjust: central; text-align: right;">
			<div id="visitaGraphics" style="font-size: 11px;">
			    <span class="label">Visitante</span><br><br>
				Ganados <span class="badge badge-success" id="ganadosVis">x</span><br><br>
				Empatados <span class="badge badge-info" id="empatadosVis">x</span><br><br>
				Perdidos <span class="badge badge-important" id="perdidosVis">x</span><br><br>
			</div>
		    </td>
		</tr>
	    </thead>
        </table>
        <div id="error_msj" style="color: red"></div>
    </div>
    <div class="modal-footer">
        <strong><i style="font-size: 15px;">Estadísticas</i></strong>
    </div>
</div>